<?php include($_SERVER['DOCUMENT_ROOT'] . "/includes/head.php"); ?>
<!--    <meta http-equiv="Content-Language" content="zh-CN">-->
<meta name="keywords" content="在线工具">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/2.0.4/css/bootstrap.min.css">
<script type="text/javascript">
    function iniFun($) {

    }
</script>
<script src="http://cdn.bootcss.com/bootstrap/2.0.4/js/bootstrap.min.js"></script>
<body>
<style>
    *, *::after, *::before {
        box-sizing: content-box;
    }

    #mainDiv, #mainDiv div {
        overflow: visible;
    }

    .wrapper {
        width: 1000px;
        margin: 0 auto;
    }

    #mainContent textarea, #mainContent input[type='text'] {
        border: 1px solid #ccc;
        resize: none;
    }

    .topBar {
        margin: 10px 0 10px 0;
    }

    .bottomBar {
        margin: 10px 0 10px 0;
    }

    #mainContent textarea {
        width: 650px;
        height: 150px;
    }

    #mainContent ul {
        margin-top: 10px;
    }

    #right_area li {
        list-style: none;
        height: 33px;
        font-size: 13pt;
    }
</style>

<div id="mainDiv">
    <?php include($_SERVER['DOCUMENT_ROOT'] . "/includes/bar.php"); ?>
    <div class="header">
        <a href="/hush-Inn" title="返回主页" class="header-logo">正则测试</a>
        <a href="#" class="header-navigation show-navigation"><i class="fa fa-navicon"></i></a>
    </div>
    <div class="header-clear-big"></div>

    <div id="mainContent" class="wrapper">
        <div class="row-fluid">
            <div class="span8">
                <div class="topBar">
                    <textarea id="textSour" placeholder="在此输入待匹配文本"></textarea>
                </div>
                <div class="operateTB">
                    <form class="well form-inline">
                        <div class="input-prepend">
                            <span class="add-on">正则表达式</span><input type="text" id="textPattern"
                                                                    placeholder="在此输入正则表达式"
                                                                    class="input-xlarge">
                        </div>
                        <label class="checkbox optionGlobal"><input type="checkbox" value="global" checked="checked"
                                                                    id="optionGlobal" style="display: none;"
                                                                    name="optionGlobl">全局搜索</label>
                        <label class="checkbox optionIgnoreCase"><input type="checkbox" value="ignoreCase"
                                                                        id="optionIgnoreCase" style="display: none;"
                                                                        name="optionIgnoreCase">忽略大小写</label>
                        <a id="onMatch" class="btn btn-primary">测试匹配</a>
                    </form>
                </div>
                <div class="bottomBar">
                    <div class="title">匹配结果：</div>
                    <textarea readonly="readonly" id="textMatchResult"></textarea>
                </div>
                <div class="operateTB">
                    <form class="well form-inline">
                        <div class="input-prepend">
                            <span class="add-on">替换文本</span><input type="text" id="textReplace" class="input-xlarge"
                                                                   placeholder="在此输入替换文本">
                        </div>
                        <a id="onReplace" class="btn btn-primary">替换</a>
                    </form>
                </div>
                <div class="bottomBar">
                    <div class="title">替换结果：</div>
                    <textarea readonly="readonly" id="textReplaceResult"></textarea><br>
                </div>
            </div>
            <div class="span4" id="right_area" style="width: 300px;">
                <ul class="nav nav-list well">
                    <li class="nav-header">常用正则表达式</li>
                    <li><a href="#" title="[\u4e00-\u9fa5]">匹配中文字符</a></li>
                    <li><a href="#" title="[^\x00-\xff]">匹配双字节字符(包括汉字在内)</a></li>
                    <li><a href="#" title="\n\s*\r">匹配空白行</a></li>
                    <li><a href="#"
                           title="[\w!#$%&amp;&#39;*+/=?^_`{|}~-]+(?:\.[\w!#$%&amp;&#39;*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?">匹配Email地址</a>
                    </li>
                    <li><a href="#" title="[a-zA-z]+://[^\s]*">匹配网址URL</a></li>
                    <li><a href="#" title="\d{3}-\d{8}|\d{4}-\{7,8}">匹配国内电话号码</a></li>
                    <li><a href="#" title="[1-9][0-9]{4,}">匹配腾讯QQ号</a></li>
                    <li><a href="#" title="[1-9]\d{5}(?!\d)">匹配中国邮政编码</a></li>
                    <li><a href="#" title="^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$">匹配18位身份证号</a></li>
                    <li><a href="#"
                           title="([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8])))">匹配(年-月-日)格式日期</a>
                    </li>
                    <li><a href="#" title="^[1-9]\d*$">匹配正整数</a></li>
                    <li><a href="#" title="^-[1-9]\d*$">匹配负整数</a></li>
                    <li><a href="#" title="^-?[1-9]\d*$">匹配整数</a></li>
                    <li><a href="#" title="^[1-9]\d*|0$">匹配非负整数（正整数 + 0）</a></li>
                    <li><a href="#" title="^-[1-9]\d*|0$">匹配非正整数（负整数 + 0）</a></li>
                    <li><a href="#" title="^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$">匹配正浮点数</a></li>
                    <li><a href="#" title="^-[1-9]\d*\.\d*|-0\.\d*[1-9]\d*$">匹配负浮点数</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Page Footer-->
    <div class="footer" style="margin-bottom: 35px;">
        <div class="footer-socials two-bottom">
            <a href="#" class="footer-share show-share-bottom"><i class="fa fa-share-alt"></i></a>
            <a href="#" class="footer-up"><i class="fa fa-angle-up"></i></a>
        </div>
    </div>
</div>
<?php include($_SERVER['DOCUMENT_ROOT'] . "/includes/share.php"); ?>

<script language="javascript">
    (function ($) {

        $(document).ready(function () {
            $("#right_area li a").click(function () {
                $("#textPattern").val($(this).attr("title"));
                onMatch();
            });
            changeColor();
            $("#onMatch").click(onMatch);
            $("#onReplace").click(onReplace);
            $(".optionGlobal").click(changeColor);
            $(".optionIgnoreCase").click(changeColor);
        });

        function setVisible(idElement, visible) {
            var obj = document.getElementById(idElement);
            obj.style.visibility = visible ? "visible" : "hidden";
        }

        function changeColor() {
            if (document.getElementById("optionGlobal").checked) {
                $(".optionGlobal").css("color", "red");
            } else {
                $(".optionGlobal").css("color", "");
            }
            if (document.getElementById("optionIgnoreCase").checked) {
                $(".optionIgnoreCase").css("color", "red");
            } else {
                $(".optionIgnoreCase").css("color", "");
            }
        }

        function isValidFields() {
            var textSour = document.getElementById("textSour");
            if (null == textSour.value || textSour.value.length < 1) {
                textSour.focus();// alert("请输入待匹配文本");
                return false;
            }
            var textPattern = document.getElementById("textPattern");
            if (null == textPattern.value || textPattern.value.length < 1) {
                textPattern.focus();// alert("请输入正则表达式");
                return false;
            }
            return true;
        }

        function buildRegex() {
            var op = "";
            if (document.getElementById("optionGlobal").checked)op = "g";
            if (document.getElementById("optionIgnoreCase").checked)op = op + "i";
            return new RegExp(document.getElementById("textPattern").value, op);
        }

        function onMatch() {
            if (!isValidFields())
                return false;
            document.getElementById("textMatchResult").value = "";
            var regex = buildRegex();
            var result = document.getElementById("textSour").value.match(regex);
            if (null == result || 0 == result.length) {
                document.getElementById("textMatchResult").value = "（没有匹配）";
                return false;
            }
            if (document.getElementById("optionGlobal").checked) {
                var strResult = "共找到 " + result.length + " 处匹配：\r\n";
                for (var i = 0; i < result.length; ++i)strResult = strResult + result[i] + "\r\n";
                document.getElementById("textMatchResult").value = strResult;
            }
            else {
                document.getElementById("textMatchResult").value = "匹配位置：" + regex.lastIndex + "\r\n匹配结果：" + result[0];
            }
            return true;
        }

        function onReplace() {
            var str = document.getElementById("textSour").value;
            var regex = buildRegex();
            document.getElementById("textReplaceResult").value = str.replace(regex, document.getElementById("textReplace").value);
        }

        function reset() {
            $("#textSour").val("");
            $("#textPattern").val("");
            $("#textMatchResult").val("");
            $("#textReplace").val("");
            $("#textReplaceResult").val("");
        }
    }(jQuery));
</script>
</body>